'use strict'

var React = require('react-native');

var {
  StyleSheet,
  DatePickerIOS,
  Text,
  View,
  TextInput,
} = React;


var DatePickerView = React.createClass({
  getDefaultProps: function() {
    return {
      date : new Date(),
      timeZoneOffsetInHours: (-1) *(new Date()).getTimezoneOffset() / 60,
    };
  },

  getInitialState: function() {
    return {
      date: this.props.date,
      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
    };
  },

  onDateChange: function(date) {
    this.setState({date: date});
  },

  onTimezoneChange: function(event) {
    var offset = parseInt(event.nativeEvent.text, 10);
    if (isNaN(offset)) {
      return;
    }
    this.setState({timeZoneOffsetInHours: offset});
  },

  render: function() {
    return(
      <View>
        <WithLabel label = "Value:">
         <Text>{
           this.state.date.toLocaleDateString() + ' ' + this.state.date.toLocaleTimeString()
         }</Text>
        </WithLabel>

        <WithLabel label = "Timezone:">
         <TextInput
          onChange = {this.onTimezoneChange}
          style = {styles.textinput}
          value = {this.state.timeZoneOffsetInHours.toString()}
         />
         <Text> hours from UTC </Text>
        </WithLabel>

        <Heading label = "Date + time picker" />

        <DatePickerIOS
          date = {this.state.date}
          mode = "datetime"
          timeZoneOffsetInHours = {this.state.timeZoneOffsetInHours * 60}
          onDateChange = {this.onDateChange}
        />

        <Heading label = "Date picker" />

        <DatePickerIOS
          date = {this.state.date}
          mode = "date"
          timeZoneOffsetInHours = {this.state.timeZoneOffsetInHours * 60}
          onDateChange = {this.onDateChange}
        />

        <Heading label = "Time picker, 10 minute interval" />

        <DatePickerIOS
          date = {this.state.date}
          mode = "time"
          timeZoneOffsetInHours = {this.state.timeZoneOffsetInHours * 60}
          onDateChange = {this.onDateChange}
          minuteInterval = {10}
        />

      </View>
    );
  },


});


var Heading = React.createClass({
  render: function() {
    return(
      <View style = {styles.headingContainer}>
        <Text style = {styles.Heading}>
          {this.props.label}
        </Text>
      </View>
    );
  }
});

var WithLabel = React.createClass({
  render: function() {
    return(
      <View style = {styles.labelContainer}>
        <View style = {styles.labelView}>
          <Text style = {styles.label}>
            {this.props.label}
            </Text>
        </View>
        {this.props.children}
      </View>
    );
  }
});


var styles = StyleSheet.create({
  textinput: {
    height: 26,
    width: 50,
    borderWidth: 0.5,
    borderColor: '#0f0f0f',
    padding: 4,
    fontSize: 13,
  },
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 20,
  },
  labelView: {
    marginRight: 10,
    paddingVertical: 2,
  },
  label: {
    fontWeight: '500',
  },
  headingContainer: {
    padding: 4,
    backgroundColor: '#f6f7f8',
  },
  heading: {
    fontWeight: '500',
    fontSize: 14,
  },
});


module.exports = DatePickerView;
